<template>
	<view v-if="showbox" class="move-box" :animation="animationBox" :style="'top: '+cartRect[1]+'px'">
		<image class="move-img" :src="moveImg" :animation="animationImg" :style="'left: ' + cartRect[0]+'px'"></image>
	</view>
</template>

<script>
	const xAnimation  = uni.createAnimation({
		duration: 550,
		timingFunction: "linear"
	})
	const yAnimation  = uni.createAnimation({
		duration: 550,
		timingFunction: "cubic-bezier(.3,-0.24,.9,.37)"
	})
	export default {
		props: {
			// 参数购物车的袋子离左侧的距离
			endX: {
				type: Number,
				default: 0
			},
			// 参数购物车的袋子离顶部的距离
			endY: {
				type: Number,
				default: 786
			}
		},
		data() {
			return {
				showbox: false,
				moveImg: '',
				cartRect: [0,0],
				animationBox: null,
				animationImg: null,
				time1: null,
				time2: null
			}
		},
		methods: {
			//url    第一个参数小球图片地址
			//startX 第二个参数图片小球开始位置离左侧的距离
			//startY 第三个参数图片小球开始位置离顶部的距离
			movebell(url,startX,startY) {
				const that 	 = this
				if (that.showbox) {
					//that.endmovebell()
					return
				}
				if (that.time1) {
					clearTimeout(that.time1)
					that.time1 = null
				}
				if (that.time2) {
					clearTimeout(that.time2)
					that.time2 = null
				}
				that.cartRect= [startX, startY]
				that.moveImg = url || 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/uni.png'
				that.showbox = true
				const x 	   = -startX - that.endX
				const y 	   = that.endY - startY
				that.time1 	 = setTimeout(() => {
					xAnimation.translateX(x).step()
					yAnimation.translateY(y).scale(.4).step()
					that.animationBox = xAnimation.export()
					that.animationImg = yAnimation.export()
				},30)
				that.time2 	 = setTimeout(() => {
					that.endmovebell()
				}, 580)
			},
			endmovebell(e) {
				const that 		    = this
				that.showbox 	    = false
				that.moveImg	    = ''
				that.cartRect	    = [0, 0]
				xAnimation.translateX(0).step()
				yAnimation.translateY(0).scale(1).step()
				that.animationBox = xAnimation.export()
				that.animationImg = yAnimation.export()
			}
		}
}	
</script>

<style scoped lang="scss">
	.move-box {
		position: fixed;
		z-index: 20000;
		.move-img {
			position: fixed;
			z-index: 20001;
			width: 80rpx;
			height: 80rpx;
			border-radius: 80rpx;
			background-color: #efefef;
		}
	}
	
</style>
